﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="mfCommentOrder.aspx.cs" Inherits="msBsc.WebUi.mMall.Buyer.mfCommentOrder" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>手机地接客商城</title>
    <%=getMeta()%>
    <link rel="stylesheet" type="text/css" href="/themes/mStyle1/mGlobal.css" charset="gbk" />
    <link rel="stylesheet" type="text/css" href="/themes/mStyle1/css/home/base.css" charset="gbk" />
    <link href="/jqPlugin/laydate/skins/default/laydate.css" rel="stylesheet" charset="gbk" />
    <link href="/themes/mStyle1/css/public/mOrder.css" rel="stylesheet" />
     <link href="/jqPlugin/Jcrop/css/jquery.Jcrop.min.css" rel="stylesheet" charset="gbk" />
    <%=getBodyBeforeJs()%>

    <script type="text/javascript" src="/jqPlugin/js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="/jqPlugin/js/jBase.js"></script>
    <script type="text/javascript" src="/jqPlugin/js/jmPage.js"></script>
    <script type="text/javascript" src="/themes/Style1/jsQt.js"></script>
    <script type="text/javascript" src="/jqPlugin/js/laytpl.js"></script>
    <script type="text/javascript" src="/themes/wStyle1/js/comm/VerifyJs.js"></script>
    <script type="themes/wStyle1/js/comm/DateInfo.js"></script>
    <script type="text/javascript" src="/jqPlugin/Jcrop/js/jquery.Jcrop.min.js" charset="gbk"></script>
    <script type="text/javascript">
        $(window).load(function () {
        });
        //        $(window).bind('resize', function () { _self._ResizeHandler(_self); })
        //        .bind('scroll', function () { _self._ResizeHandler(_self); });
    </script>
    <!--head fix rgn-->
    <style type="text/css">
        .comment_img {
            width: 100%;
            display: table;
            margin-top: 20px;
        }

            .comment_img .pictureImg {
                color: #cccccc;
                cursor: pointer;
                display: table-cell;
                font-size: 54px;
                height: 100%;
                line-height: 100%;
                text-align: center;
                width: 20%;
            }

                .comment_img .pictureImg .pcimg {
                    margin: 0px 2px;
                    border: 1px dashed #cccccc;
                }
                    .comment_img .pictureImg .pcimg img {
                        max-width:100%;
                        max-height:54px;
                    }
    </style>
    <base target="_self" />
</head>
<body>
    <div class="viewport">
        <%=msBsc.WebUi.Code.QtHtmlGet.GetWapHeaderMenuHtml(true) %>
        <form action='#' method="post" id="J_EmailForm">
            <input type="hidden" id="orderId" />
            <input type="hidden" id="paroductId" />
            <div id="c_order" class="c_order">
                <div style="width: 100%; margin-top: 15px;">
                    <textarea id="commentInfo" style="width: 100%; height: 100px; border: #808080 1px solid; border-radius: 5px;" placeholder="请输入评论内容原因"></textarea>
                </div>

                <div class="comment_img">
                    <div class="pictureImg">
                        <div class="pcimg" id="reviewP1" data-count="0">
                            +
                        </div>
                    </div>
                    <div class="pictureImg">
                        <div class="pcimg" id="reviewP2" data-count="0">
                            +
                        </div>
                    </div>
                    <div class="pictureImg">
                        <div class="pcimg" id="reviewP3" data-count="0">
                            +
                        </div>
                    </div>
                    <div class="pictureImg">
                        <div class="pcimg" id="reviewP4" data-count="0">
                            +
                        </div>
                    </div>
                    <div class="pictureImg">
                        <div class="pcimg" id="reviewP5" data-count="0">
                            +
                        </div>
                    </div>
                </div>

            </div>

            <div id="order_bottom" class="order_bottom">
                <div class="lb_order order_ref">
                    <a class="btn_submit" onclick="imgMsg()" style="position:relative;">添加图片<input type="file" name="image_file" id="image_file" style="width: 100%; height: 36px; opacity: 0; position:absolute;top:0px; left:0px; border-radius:5px;" /></a>
                </div>
                <div class="rb_order order_ref_r">
                    <a class="btn_submit btn_change" id="submitOrder" onclick="doto()">提交评论</a>
                </div>

            </div>
        </form>
        <script type="text/javascript" src="/jqPlugin/laydate/laydate.js" charset="gbk"></script>
        <script src="/themes/wStyle1/js/comm/DateInfo.js"></script>
        <script type="text/javascript">
            (function () {
                $("#h_title").text("发布评论");
                $("#orderId").val(GetQueryStr("orderId"));
                $("#paroductId").val(GetQueryStr("paroductId"))
                $("#image_file").removeAttr("disabled");
                $("#image_file").css("display", "block");
                InitImgUpload1("image_file", 600, [40, 40], [450, 450], function (_base64) {
                    for (var i = 0; i < $(".pcimg[data-count=0]").length; i++) {
                        $($(".pcimg[data-count=0]")[i]).html("<img data-value='" + $("#image_file").val() + "' src='" + _base64 + "' />");
                        $($(".pcimg[data-count=0]")[i]).attr("data-count", "1");
                        if ($(".pcimg[data-count=0]").length<1) {
                            $("#image_file").attr({ "disabled": "disabled" });
                            $("#image_file").css("display","none");
                        }
                        break;
                    }
                    //$.each($(".pcimg[data-count=0]"), function (i, item) {
                    //    $(this).html("<img src='" + _base64 + "'/>");
                    //    $(this).attr("data-count", "1");
                    //});
                    //$("#reviewP1").html("<img src='" + _base64 + "'/>");
                });
                //doto();
            })();
            function doto() {
                var commentInfo = $("#commentInfo").val();
                if (IsNull(commentInfo)) {
                    alert("评论内容不能为空");
                    return;
                }
                var reviewP1 = $("#reviewP1 img").attr("src");
                var reviewP1Name = $("#reviewP1 img").attr("data-value");
                var reviewP2 = $("#reviewP2 img").attr("src");
                var reviewP2Name = $("#reviewP1 img").attr("data-value");
                var reviewP3 = $("#reviewP3 img").attr("src");
                var reviewP3Name = $("#reviewP1 img").attr("data-value");
                var reviewP4 = $("#reviewP4 img").attr("src");
                var reviewP4Name = $("#reviewP1 img").attr("data-value");
                var reviewP5 = $("#reviewP5 img").attr("src");
                var reviewP5Name = $("#reviewP1 img").attr("data-value");
                var opart = new jsonRow();
                opart.AddCell("orderId", $("#orderId").val());
                opart.AddCell("paroductId", $("#paroductId").val());
                opart.AddCell("Comments", commentInfo);
                opart.AddCell("reviewP1", reviewP1);
                opart.AddCell("reviewP1Name", reviewP1Name);
                opart.AddCell("reviewP2", reviewP2);
                opart.AddCell("reviewP2Name", reviewP2Name);
                opart.AddCell("reviewP3", reviewP3);
                opart.AddCell("reviewP3Name", reviewP3Name);
                opart.AddCell("reviewP4", reviewP4);
                opart.AddCell("reviewP4Name", reviewP4Name);
                opart.AddCell("reviewP5", reviewP5);
                opart.AddCell("reviewP5Name", reviewP5Name);
                opart.AddCell("ACTION", "addComments");
                ajaxComm(opart);
            }

            function imgMsg() {
                if ($(".pcimg[data-count=0]").length < 1) {
                    alert("您最上传5张评论图片");
                    return;
                }
            }
            
            
            function InitImgUpload1(_fileinput_id, _maxWidthOrHeight, _minSize, _maxSize, _func) {
                $('#' + _fileinput_id).on('click', function () {
                    if ($(".pcimg[data-count=0]").length < 1) {
                        alert("您最上传5张评论图片");
                        return;
                        //$("#image_file").attr({ "disabled": "disabled" });
                    }
                });
                $('#' + _fileinput_id).on('change', function () {
                    var fileinput = this;
                    var file = fileinput.files[0];
                    _maxWidthOrHeight = _maxWidthOrHeight || 800;
                    _minSize = _minSize || [64, 64];
                    _maxSize = _maxSize || [800, 800];
                    // check for image type (jpg and png are allowed)
                    var rFilter = /^(image\/jpeg|image\/png|image\/jpg)$/i;
                    if (!rFilter.test(file.type)) {
                        alert('请选择jpg、jpeg或png格式的图片');
                        return;
                    }
                    window.URL = window.URL || window.webkitURL;
                    var url = window.URL.createObjectURL(file);
                    var $img = new Image();

                    $img.onload = function () {
                        var width = $img.width,
                                height = $img.height,
                                scale = width / height;
                        if (height > _maxWidthOrHeight || width > _maxWidthOrHeight) {
                            if (width > height) {
                                width = parseInt(_maxWidthOrHeight);
                                height = parseInt(width / scale);
                            } else {
                                height = parseInt(_maxWidthOrHeight);
                                width = parseInt(height * scale);
                            }
                        }
                        var $canvas = $('<canvas width="' + width + '" height="' + height + '"></canvas>');
                        var ctx = $canvas[0].getContext('2d');
                        ctx.drawImage($img, 0, 0, width, height);
                        var base64 = $canvas[0].toDataURL(file.type, 0.5);
                        _func && _func(base64);

                    }
                    $img.src = url;
                });
            }
        </script>
    </div>
</body>
<%=getBodyAfterJs() %>
</html>
